<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-06-21 19:19:12
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-06-22 11:42:15
 * @FilePath: \nien-vue3-admin\src\views\myMission\businessHandling\processApplication\components\Products.vue
 * @Description: 产品
-->
<template>
  <div class="mb8">
    <el-row class="mb8">
      <el-col>
        <el-button type="primary" class="mb8" @click="onAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="compuedtableList">
      <el-table-column v-for="column in tableColumns" v-bind="column" :key="column.prop||column.key"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row, $index }">
          <el-button text type="primary" @click="handleDel(row, $index)">删除</el-button>
          <el-button text type="primary" @click="handleUpdate(row, $index)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="open"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
        :rules="rules"
        :model="form"
        inline
        label-width="110px"
      >
        <!-- <el-form-item label="销售产品" prop="salesProductsCode">
          <el-select
            v-model="form.salesProductsCode"
            size="small"
            width="180"
          >
            <el-option v-for="product in productList" :value="product.x"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="起收重量" prop="liftingWeight">
          <el-input-number
            v-model="form.liftingWeight"
            style="width: 180px;"
            size="small"
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="单件补足重量" prop="underWeight">
          <el-input-number
            v-model="form.underWeight"
            style="width: 180px;"
            size="small"
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="单件材积重量" prop="woodWeight">
          <el-input-number
            v-model="form.woodWeight"
            style="width: 180px;"
            size="small"
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="大货价格调整" prop="bigPriceAdjustment">
          <el-input-number
            v-model="form.bigPriceAdjustment"
            style="width: 180px;"
            size="small"
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="小货价格调整" prop="smallPriceAdjustment">
          <el-input-number
            v-model="form.smallPriceAdjustment"
            style="width: 180px;"
            size="small"
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="最低单价" prop="pricesForSpecialProducts ">
          <el-input-number
            v-model="form.pricesForSpecialProducts"
            style="width: 180px;"
            size="small"
            :controls="false"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="大货分泡材积系数" prop="specialVolumeCoefficient">
          <el-input
            v-model="form.specialVolumeCoefficient"
            style="width: 180px;"
            size="small"
            :controls="false"
          ></el-input>
        </el-form-item>
        <el-form-item label="小货分泡材积系数" prop="specialVolumeCoefficientSmall">
          <el-input
            v-model="form.specialVolumeCoefficientSmall"
            style="width: 180px;"
            size="small"
            :controls="false"
          ></el-input>
        </el-form-item>
        <el-form-item label="体积系数" prop="volunmFactor">
          <el-input
            v-model="form.volunmFactor"
            type="number"
            size="small"
            :controls="false"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否补足单件" prop="isSingle">
          <el-radio-group v-model="form.isSingle" size="small">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否补足101" prop="isMakeUp">
          <el-radio-group v-model="form.isMakeUp" size="small">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否生效" prop="status">
          <el-radio-group v-model="form.status" size="small" style="width: 180px;">
            <el-radio v-for="(dict, index) in statusOptions" :key="index" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生效时间" prop="time" class="time">
          <el-date-picker
            v-model="form.time"
            style="width: 320px;"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang='ts' setup>
import { computed, ref } from 'vue'
import { DictDirection } from '@/store/modules/dicts'
import { resetForm, useDicts } from '@/utils'

let type = 'add', tableKey = null
const onAdd = () => {
    open.value = true
  }, compuedtableList = computed<any[]>({
    get() {
      console.log(props)
      
      return props.modelValue
    },
    set(v) {
      emits('update:modelValue', v)
    },
  }), emits = defineEmits(['update:modelValue']),
  props = withDefaults(defineProps<{
    modelValue:unknown[]
  }>(), {
    modelValue: () => [],
  }), tableColumns = [
    { align: 'center', type: 'selection', width: 45, key: 'selection' },
    { align: 'center', label: '销售产品', prop: 'salesProductsCode', minWidth: '100' },
    { align: 'center', label: '起收重量', prop: 'liftingWeight', minWidth: '100' },
    { align: 'center', label: '单件补足重量', prop: 'underWeight', minWidth: '100' },
    { align: 'center', label: '单件材积重量', prop: 'woodWeight', minWidth: '100' },
    { align: 'center', label: '大货价格调整', prop: 'bigPriceAdjustment', minWidth: '100' },
    { align: 'center', label: '小货价格调整', prop: 'smallPriceAdjustment', minWidth: '100' },
    { align: 'center', label: '最低单价', prop: 'pricesForSpecialProducts', minWidth: '100' },
    { align: 'center', label: '大货分泡材积系数', prop: 'specialVolumeCoefficient', minWidth: '150' },
    { align: 'center', label: '小货分泡材积系数', prop: 'specialVolumeCoefficientSmall', minWidth: '150' },
    { align: 'center', label: '体积系数', prop: 'volunmFactor', minWidth: '140' },
    { align: 'center', label: '是否补足单件', prop: 'isSingle', minWidth: '140' },
    { align: 'center', label: '是否补足101', prop: 'isMakeUp', minWidth: '140' },
    { align: 'center', label: '状态', prop: 'status' },
    { align: 'center', label: '开始日期', prop: 'effectOfTime', minWidth: '170' },
    { align: 'center', label: '结束日期', prop: 'theFailureTime', minWidth: '170' },
  ], handleDel = (row, $index) => {
    console.log(row, $index, 'oo')
  }, handleUpdate = (row, key) => {
    form.value = JSON.parse(JSON.stringify(row))
    type = 'update'
    tableKey = key
  }, open = ref(false), title = ref(''), rules = {}, formRef = ref(null), form = ref({
    salesProductsCode: undefined,
    liftingWeight: undefined,
    underWeight: undefined,
    woodWeight: undefined,
    bigPriceAdjustment: undefined,
    smallPriceAdjustment: undefined,
    pricesForSpecialProducts: undefined,
    specialVolumeCoefficient: undefined,
    specialVolumeCoefficientSmall: undefined,
    volunmFactor: undefined,
    isSingle: undefined,
    isMakeUp: undefined,
    status: undefined,
    time: undefined,
  }), submit = () => {
    if (type === 'add') {
      compuedtableList.value.push(JSON.parse(JSON.stringify(form.value)))
    } else if (type === 'update') {
      compuedtableList.value[tableKey] = JSON.parse(JSON.stringify(form.value))
    }
  }, cancel = () => {
    open.value = false
    resetForm(formRef.value)
    return true
  }
const { 
  [DictDirection.产品]: productList, 
  [DictDirection.通用状态]: statusOptions,
} = useDicts([DictDirection.产品, DictDirection.通用状态])
</script>
<!-- <style lang='less' scoped>
</style> -->